{{define "script"}}{{end}}
{{define "base"}}
<!DOCTYPE html>
<!-- Copyright 2021 The LUCI Authors. All rights reserved.
Use of this source code is governed under the Apache License, Version 2.0.
that can be found in the LICENSE file. -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{ template "title" .}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="/ui/static/img/favicon.ico" rel="shortcut icon">

    <script src="/ui/static/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/ui/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/ui/static/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" type="text/css"/>

    <link href="/ui/static/styles/common.css" rel="stylesheet">
    <script src="/ui/static/js/api.js"></script>
    <script src="/ui/static/js/common.js"></script>

    <script type="text/javascript">
      api.setXSRFToken('{{.XSRFToken}}');
      api.startXSRFTokenAutoupdate();
      common.setIntegratedUIHost('{{.IntegratedUI}}');
    </script>
  </head>

  <body>
    <div class="container-md">
      {{if .SimpleHeader}}
      <div class="row-fluid">
        <div class="col-md-10">
          <h3>{{ template "title" .}}</h3>
          <hr />
        </div>
      </div>
      {{else}}
      <nav id="main-navbar" class="navbar navbar-expand-xl navbar-light bg-light border rounded">
        <div class="container-fluid">
          <a class="navbar-brand">
            Auth Service <span class="small text-muted fw-light">v2</span>
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li class="nav-item">
                <a class="nav-link" href="/auth/groups">Groups</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/auth/change_log">Changes</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/auth/lookup">Lookup</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/auth/ip_allowlists">IP Allowlists</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/auth/services">Services</a>
              </li>
            </ul>
            <form class="d-flex align-items-center" id="account-text-nav">
              <div
                id="send-feedback"
                class="rounded-circle position-relative mx-2 p-3"
                data-bs-toggle="tooltip"
                data-bs-container="body"
                data-bs-placement="bottom"
                title="Send feedback">
                <a
                  class="stretched-link icon-stack navbar-text"
                  target="_blank"
                  href="https://goto.google.com/luci-auth-service-bug"
                  aria-label="send feedback">
                  <i class="icon-stack-item bi bi-chat-left fs-5"></i>
                  <!-- Override the translation so the exclamation is in the
                   middle of the chat bubble which has a bottom tail. -->
                  <i class="icon-stack-item bi bi-exclamation fs-6" style="transform: translate(-50%, -60%);"></i>
                </a>
              </div>
              <span class="navbar-text">{{ .User.Email }}</span>
              <a id="logout-btn" class="nav-link" href="{{ .LogoutURL }}">Logout</a>
            </form>
          </div>
        </div>
      </nav>
      {{end}}

      <div id="integrated-ui-alert-container"></div>

      <div class="container-md px-0 my-4">
        <div class="d-flex flex-column justify-content-center">{{template "content" .}}</div>
      </div>

      <div class="container">
        <div class="row">
          <div class="col px-0" id="version-div">
            <hr />
            <small class="pull-right">Version: {{.AppVersion}}</small>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      common.initializePage();
    </script>

    <!-- Template for alert to link to integrated UI. -->
    <template id="integrated-ui-alert-template">
      <div class="alert alert-primary alert-dismissible show fade my-4" role="alert">
        Auth Service has a new UI.
        <a id="integrated-ui-link" class="alert-link" target="_blank">
          Try it out here!
        </a>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        </button>
      </div>
    </template>

    <!-- Template for loading box, to be shown while results are fetched. -->
    <template id="loading-box-template">
      <div class="d-flex justify-content-center">
        <div id="spinner" class="spinner-border text-secondary my-5" style="display: none;">
        </div>
      </div>
    </template>

    <!-- Error box template, for displaying an error message. -->
    <template id="error-box-template">
      <div class="card border-danger">
        <div class="card-header text-white bg-danger">
          <i class="bi bi-exclamation-circle me-2"></i>
          Error - <span id="error-title"></span>
        </div>
        <div class="card-body">
          <span id="error-message" class="card-text"></span>
        </div>
      </div>
    </template>

  </body>

  {{template "script" .}}
</html>
{{end}}
